<!--
* @description 喷淋-警情管理
* @author zywu
* @date 2021/04/29 14:58:11
!-->
<template>
  <div class="firealarm-list">
    <div v-show="!currentAlarm">
      <div class="count-wrap d-flex ai-center">
        <div
          class="count-card card0 d-flex ai-center jc-between"
          :class="{'is-active':alarmType==0}"
          @click="onAlarmTypeChange(0)"
        >
          <div>
            <div class="count-card__name">警情总数</div>
            <div class="count-card__num">{{staticObj.totalCount||0}}</div>
          </div>
          <i class="iconfont icon-jianyipenlintubiao_jingqingzongshu"></i>
          <i class="el-icon el-icon-caret-bottom"></i>
        </div>
        <div
          class="count-card card1 d-flex ai-center jc-between"
          :class="{'is-active':alarmType==1}"
          @click="onAlarmTypeChange(1)"
        >
          <div>
            <div class="count-card__name">火灾报警单位</div>
            <div class="count-card__num">{{staticObj.unitWarnCount||0}}</div>
          </div>
          <i class="iconfont icon-jianyipenlintubiao_huozaibaojingdanwei"></i>
          <i class="el-icon el-icon-caret-bottom"></i>
        </div>
        <div
          class="count-card card2 d-flex ai-center jc-between"
          :class="{'is-active':alarmType==2}"
          @click="onAlarmTypeChange(2)"
        >
          <div>
            <div class="count-card__name">火灾预警设备</div>
            <div class="count-card__num">{{staticObj.deviceWarnCount||0}}</div>
          </div>
          <i class="iconfont icon-jianyipenlintubiao_huozaiyujingshebei"></i>
          <i class="el-icon el-icon-caret-bottom"></i>
        </div>
        <div
          class="count-card card3 d-flex ai-center jc-between"
          :class="{'is-active':alarmType==3}"
          @click="onAlarmTypeChange(3)"
        >
          <div>
            <div class="count-card__name">安全隐患单位</div>
            <div class="count-card__num">{{staticObj.unitFaultCount||0}}</div>
          </div>
          <i class="iconfont icon-jianyipenlintubiao_anquanyinhuandanwei"></i>
          <i class="el-icon el-icon-caret-bottom"></i>
        </div>
        <div
          class="count-card card4 d-flex ai-center jc-between"
          :class="{'is-active':alarmType==4}"
          @click="onAlarmTypeChange(4)"
        >
          <div>
            <div class="count-card__name">故障物联设备</div>
            <div class="count-card__num">{{staticObj.deviceFaultCount||0}}</div>
          </div>
          <i class="iconfont icon-jianyipenlintubiao_guzhangwulianshebei"></i>
          <i class="el-icon el-icon-caret-bottom"></i>
        </div>
      </div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
        <el-form-item>
          <el-select
            v-model="formInline.orgId"
            placeholder="全部业主单位"
            filterable
            clearable
            :collapse-tags="true"
            @change="getData(1)"
          >
            <el-option
              v-for="item in orgOptions"
              :key="item.organizationId"
              :label="item.shortName"
              :value="item.organizationId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formInline.alarmStatus"
            placeholder="选择处置状态"
            filterable
            clearable
            :collapse-tags="true"
            @change="getData(1)"
          >
            <el-option v-for="item in statusList" :key="item.value" :label="item.text" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item>
          <el-select
            v-model="formInline.alarmType"
            placeholder="选择警情类型"
            filterable
            clearable
            :collapse-tags="true"
            @change="getData(1)"
          >
            <el-option v-for="item in typeList" :key="item.value" :label="item.text" :value="item.value"></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item v-show="alarmType==2||alarmType==4">
          <el-select
            v-model="formInline.deviceStatus"
            placeholder="设备是否复位"
            filterable
            clearable
            :collapse-tags="true"
            @change="getData(1)"
          >
            <el-option v-for="item in resetStatusList" :key="item.value" :label="item.text" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="formInline.time"
            type="datetimerange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00','23:59:59']"
            :picker-options="pickerOptions"
            @change="getData(1)"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button class="form-search-btn" type="primary" @click="getData(1)">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table v-if="showTable" v-loading="loading" :data="tableData" :default-sort="{}" @sort-change="sortChange">
        <el-table-column label="序号" type="index" width="80"></el-table-column>
        <el-table-column v-if="alarmType==0" prop="status" label="处置状态">
          <template slot-scope="sc">
            <span class="deal-status" :class="'status'+(sc.row.alarmStatus||1)">{{formatAlarmStatusName(sc.row)}}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="alarmType==0" prop="alarmType" label="警情类型">
          <template slot-scope="sc">
            <span class="alarm-type" :class="'type'+formatAlarmType(sc.row)">{{formatAlarmTypeName(sc.row)}}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="alarmType==0" prop="description" label="警情内容" show-overflow-tooltip></el-table-column>
        <el-table-column v-if="alarmType>0" prop="deviceName" :label="deviceAlarmStatusMap[alarmType]+'设备'"></el-table-column>
        <el-table-column v-if="alarmType==2||alarmType==4" prop="deviceAddress" label="设备位置" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createTime" label="发生时间" width="180"></el-table-column>
        <el-table-column prop="closeTime" label="持续时长" :formatter="formatDuration"></el-table-column>
        <el-table-column v-if="alarmType==2||alarmType==4" prop="deviceStatus" label="设备是否复位">
          <template v-slot="sc">{{sc.row.deviceStatus==1?'未':'已'}}复位</template>
        </el-table-column>
        <el-table-column prop="unitName" label="联网单位" show-overflow-tooltip></el-table-column>
        <el-table-column prop="unitAddress" label="单位位置" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" align="center" width="170">
          <template slot-scope="scope">
            <el-button @click="showDetail(scope.row)" type="text" :disabled="scope.row.alarmStatus==3" size="small">警情处置</el-button>
            <el-button @click="showDetail(scope.row,true)" type="text" size="small">查看详情</el-button>
          </template>
        </el-table-column>
        <template slot="empty">
              <div class="text-center" style="padding:82px 0;">
                <img src="../../assets/images/spray/no-alarm.png" />
                <div style="color:#999;line-height:1;">暂无警情</div>
              </div>
            </template>
      </el-table>
      <el-pagination
        v-show="total>0"
        background
        @size-change="sizeChange"
        @current-change="pageChange"
        :current-page="pageIndex"
        :page-sizes="[10, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="text-align:right;"
      ></el-pagination>
    </div>
    <fire-alarm-detail v-if="currentAlarm" :dataObj="currentAlarm" :readonly="detailReadonly" @return="onReturn"></fire-alarm-detail>
  </div>
</template>

<script>
import FireAlarmDetail from './FireAlarmDetail'
import { getAlarmListByPage, getAlarmStats } from '@/api/spray'
import util from '@/utils/util'
import { mapState, mapGetters } from 'vuex'
export default {
  components: { FireAlarmDetail },
  data() {
    return {
      deviceAlarmStatusMap: ['', '报警', '预警', '故障', '故障'],
      statusList: [
        { text: '未处置', value: '1' },
        { text: '处置中', value: '2' },
        { text: '已处置', value: '3' },
      ],
      typeList: [
        { text: '火灾报警', value: '1' },
        { text: '火灾预警', value: '2' },
        { text: '安全隐患', value: '3' },
        { text: '设备故障', value: '4' },
      ],
      resetStatusList: [
        { text: '未复位', value: '1' },
        { text: '已复位', value: '2' },
      ],
      alarmType: 0,
      formInline: {
        queryContent: '',
        orgId: '',
        time: '',
        deviceStatus: '',
        alarmType: '',
        alarmStatus: '',
      },
      pageSize: 10,
      pageIndex: 1,
      total: 0,
      showTable: true,
      tableData: [],
      staticObj: {
        deviceWarnCount: 0,
        deviceFaultCount: 0,
        unitWarnCount: 0,
        unitFaultCount: 0,
      },
      loading: false,
      pickerOptions: util.intTimePickerOptions(),
      currentAlarm: '',
      detailReadonly: false,
    }
  },
  computed: {
    ...mapState(['orgOptions']),
    ...mapGetters(['isMuilUnitUser', 'userOrgId', 'userOrgIds']),
  },

  created() {
    this.getData(1)
  },

  mounted() {},

  methods: {
    formatAlarmStatusName(row) {
      let obj = this.statusList.filter((n) => {
        return n.value == row.alarmStatus
      })[0]
      return obj ? obj.text : ''
    },
    onReturn() {
      this.currentAlarm = ''
    },
    formatAlarmTypeName(row) {
      if (row.alarmLevel == 1) {
        if (row.alarmType == 1) return '火灾报警'
        else return '火灾预警'
      } else {
        if (row.alarmType == 1) return '安全隐患'
        else return '设备故障'
      }
    },
    formatAlarmType(row) {
      if (row.alarmLevel == 1) {
        if (row.alarmType == 1) return 1
        else return 2
      } else {
        if (row.alarmType == 1) return 3
        else return 4
      }
    },
    sortChange(obj) {
      if (obj.order) {
        this.formInline.order = obj.order == 'descending' ? 'desc' : 'asc'
        this.formInline.orderByPro = obj.prop
        this.getList(1)
      }
    },
    onAlarmTypeChange(val) {
      this.alarmType = val
      this.getList(1)
    },
    getData(_pageIndex) {
      this.getList(_pageIndex)
      this.getStatistic()
    },
    //获取列表
    getList(_pageIndex) {
      if (_pageIndex) {
        this.pageIndex = _pageIndex
      }
      this.loading = true
      let {
        orgId,
        queryContent,
        time,
        deviceStatus,
        alarmStatus,
      } = this.formInline
      getAlarmListByPage({
        orgIds: orgId ? orgId : this.userOrgIds,
        alarmType:
          this.alarmType == 0
            ? ''
            : this.alarmType == 1 || this.alarmType == 3
            ? 1
            : 2,
        alarmLevel:
          this.alarmType == 0
            ? ''
            : this.alarmType == 1 || this.alarmType == 2
            ? 1
            : 2,
        alarmStatus: alarmStatus,
        deviceStatus: deviceStatus,
        beginTime: time ? time[0] : '',
        endTime: time ? time[1] : '',
        pageIndex: this.pageIndex - 1,
        pageSize: this.pageSize,
        queryContent,
      }).then((result) => {
        this.showTable = false
        this.total = result.total
        this.tableData = result.data || []
        this.loading = false
        this.$nextTick(() => {
          this.showTable = true
        })
      })
    },
    // 统计
    getStatistic() {
      let { orgId, queryContent, time, deviceStatus } = this.formInline
      getAlarmStats({
        orgIds: orgId ? orgId : this.userOrgIds,
        alarmStatus: '',
        deviceStatus: deviceStatus,
        beginTime: time ? time[0] : '',
        endTime: time ? time[1] : '',
      }).then((res) => {
        this.staticObj = res.data
      })
    },
    sizeChange(val) {
      //页码切换
      this.pageIndex = 1
      this.pageSize = val
      this.getList()
    },
    pageChange(val) {
      //翻页
      this.pageIndex = val
      this.getList()
    },
    showDetail(row, readonly = false) {
      this.detailReadonly = readonly
      this.currentAlarm = Object.assign({}, row)
    },
    formatDuration(row, col, val) {
      let milliSeconds =
        (row.closeTime ? new Date(row.closeTime) : new Date()).getTime() -
        new Date(row.createTime).getTime()
      return util
        .getTimeDuration(parseInt(milliSeconds / 1000))
        .splice(0, 2)
        .map((m) => {
          return m.value + m.unit
        })
        .join('')
    },
  },
}
</script>
<style lang='scss'>
.firealarm-list {
  .count-wrap {
    padding: 10px 0 30px;
  }
  .count-card {
    flex: 1;
    position: relative;
    margin: 0 10px 0 0;
    padding: 30px 50px;
    background: #f8f9fc;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    &:last-child {
      margin-right: 0;
    }
    &:hover,
    &.is-active {
      transform: translateY(-10px);
    }
    &__name {
      font-size: 16px;
      color: #666;
    }
    &__num {
      margin-top: 15px;
      font-size: 34px;
      color: #333;
    }
    .iconfont {
      font-size: 76px;
    }
    .el-icon-caret-bottom {
      position: absolute;
      bottom: -15px;
      left: 50%;
      font-size: 24px;
      transform: translateX(-50%);
      color: transparent;
    }
    &.card0 {
      .iconfont {
        color: #6d74ff;
      }
    }
    &.card1 {
      .iconfont {
        color: rgba(255, 70, 43, 1);
      }
    }
    &.card2 {
      .iconfont {
        color: rgba(254, 145, 28, 1);
      }
    }
    &.card3 {
      .iconfont {
        color: rgba(255, 209, 13, 1);
      }
    }
    &.card4 {
      .iconfont {
        color: rgba(67, 158, 255, 1);
      }
    }
    &.is-active {
      color: #fff;
      .iconfont {
        color: #fff;
      }
      .count-card__name,
      .count-card__num {
        color: #fff;
      }
      &.card0 {
        background: linear-gradient(to right, #6d74ff, #878dff);
        .el-icon-caret-bottom {
          color: #8d92ff;
        }
      }
      &.card1 {
        background: linear-gradient(to right, #ff462b, #fe7b71);
        .el-icon-caret-bottom {
          color: #fe5d4a;
        }
      }
      &.card2 {
        background: linear-gradient(to right, #fe911c, #febf70);
        .el-icon-caret-bottom {
          color: #fea743;
        }
      }
      &.card3 {
        background: linear-gradient(to right, #ffd00c, #fee00f);
        .el-icon-caret-bottom {
          color: #fed50d;
        }
      }
      &.card4 {
        background: linear-gradient(to right, #439eff, #73c0ff);
        .el-icon-caret-bottom {
          color: #57acff;
        }
      }
    }
  }
  .el-table {
    border-top: 1px solid #ebeef5;
  }
  .deal-status {
    position: relative;
    padding-left: 10px;
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 7px;
      height: 7px;
      background: #fd5e5e;
      border-radius: 50%;
    }
    &.status2 {
      &::before {
        background: #43bcff;
      }
    }
    &.status3 {
      &::before {
        background: #47cfad;
      }
    }
  }
  .alarm-type {
    display: inline-block;
    padding: 2px 10px;
    color: #fff;
    border-radius: 14px;
    &.type1 {
      background: #fd5e5e;
    }
    &.type2 {
      background: #feaa4b;
    }
    &.type3 {
      background: #ffd10d;
    }
    &.type4 {
      background: #49a2ff;
    }
  }
}
</style>